{namespace Pond.Docs.soy}

/**
 * This is a Closure Template.
 *
 * To regenerate just English, run:
 *   make pond-docs-en
 *
 * To regenerate all languages, run:
 *   make languages
 */

/**
 * Web page structure.
 */
{template .start}
<h1>Pond Documentation</h1>

<h2 id="pond"><img src="../common/1x1.gif">Pond</h2>

<div id="pond-content">
  <h3>Angles</h3>

  <p>The compass is oriented so that due east (right) is 0 degrees, 90 is north,
  180 is west, 270 is south.
  Angles wrap as expected: -90 is south, 450 is north.</p>

  <p><img src="docs/compass.png" height="145" width="150" style="padding: 0 2em;"></p>


  <h3>Cannon</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="41" width="250">
        <g class="blocklyDraggable">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 222.36071014404297 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 125.01641845703125,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z M 193.4027557373047,5 h -38.31193542480469 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 38.31193542480469 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 222.36071014404297 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 125.01641845703125,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z M 193.4027557373047,5 h -38.31193542480469 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 38.31193542480469 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 39.5 M 39.5,0.5 H 221.86071014404297 M 2.6966991411008934,33.30330085889911 A 7.5,7.5 0 0,1 0.5,28 V 8 M 125.51641845703125,5.5 v 27 h -36.020530700683594 M 83.89588775634766,24.3 l 3.68,-2.1 M 193.9027557373047,5.5 v 27 h -38.31193542480469 M 149.9908203125,24.3 l 3.68,-2.1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,10)">cannon</text>
          <text class="blocklyText" y="12.5" transform="translate(68.11233520507812,10)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(135.01641845703125,10)">,</text>
          <text class="blocklyText" y="12.5" transform="translate(203.4027557373047,10)">);</text>
          <g class="blocklyDraggable" transform="translate(89.99588775634766,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 33.520530700683594 M 33.520530700683594,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="24.020530700683594"></rect>
              <text class="blocklyText" y="12.5">0
              <tspan>°</tspan></text>
            </g>
          </g>
          <g class="blocklyDraggable" transform="translate(156.0908203125,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 36.31193542480469 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 36.31193542480469 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 35.81193542480469 M 35.81193542480469,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="26.311935424804688"></rect>
              <text class="blocklyText" y="12.5">70</text>
            </g>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">cannon(<i>angle</i>, <i>range</i>)</pre>
  {/if}

  <p>The <code>cannon()</code> function fires a cannonball towards the specified
  angle and range.  The angle is independent of the direction of the duck.
  The range can be 0-70 metres, with greater ranges truncated to 70.</p>

  <p>The cannon takes about one second to reload after firing.
  If <code>cannon()</code> is called during this time, nothing happens.
  {if $ij.pond == 'js'}{sp}
    <code>cannon()</code> returns <code>true</code> if a cannonball was fired,
    or <code>false</code> if the cannon is reloading.
  {/if}
  </p>


  {if $ij.level >= 5}
  <h3>Scan</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="37" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,0 H 20 H 132.76456451416016 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 107.88101196289062,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,0 H 20 H 132.76456451416016 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 107.88101196289062,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,0.5 H 19.5 M 19.5,0.5 H 132.26456451416016 M 0.5,35.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1 M 108.38101196289062,5.5 v 27 h -36.020530700683594 M 66.76048126220704,24.3 l 3.68,-2.1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,10)">scan</text>
          <text class="blocklyText" y="12.5" transform="translate(50.9769287109375,10)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(117.88101196289062,10)">)</text>
          <g class="blocklyDraggable" transform="translate(72.86048126220703,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 33.520530700683594 M 33.520530700683594,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="24.020530700683594"></rect>
              <text class="blocklyText" y="12.5">0
              <tspan>°</tspan></text>
            </g>
          </g>
        </g>

      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">scan(<i>angle</i>){\n}
  scan(<i>angle</i>, <i>width</i>)</pre>
  {/if}

  <p>The <code>scan()</code> function activates the duck's radar.  This function
  returns the range to the nearest opponent in the specified direction.
  The angle is independent of the direction of the duck.  Sunk opponents are
  not detected.  If there is no opponent in that direction,
  then <code>Infinity</code> is returned.</p>

  {if $ij.pond == 'js'}
    <p>
      The second (optional) parameter of <code>scan()</code> specifies the width
      of the scanning beam.  This can be from 1 degree to 20 degrees.  Advanced
      players may wish to start scanning with a width of 20 for a fast scan, then
      progressively decrease the width to get more accuracy.  If not specified,
      the width is 5.
      This parameter is only available with JavaScript, not with blocks.
    </p>
  {/if}
  {/if}


  {if $ij.level >= 7}
  <h3>Swim</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="41" width="250">
       <g class="blocklyDraggable">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 139.2592544555664 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 110.30130004882812,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z"></path>
         <path class="blocklyPath" fill="#995ba5" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 139.2592544555664 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 110.30130004882812,5 h -36.020530700683594 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 36.020530700683594 z"></path>
         <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 39.5 M 39.5,0.5 H 138.7592544555664 M 2.6966991411008934,33.30330085889911 A 7.5,7.5 0 0,1 0.5,28 V 8 M 110.80130004882812,5.5 v 27 h -36.020530700683594 M 69.18076934814454,24.3 l 3.68,-2.1"></path>
         <text class="blocklyText" y="12.5" transform="translate(10,10)">swim</text>
         <text class="blocklyText" y="12.5" transform="translate(53.397216796875,10)">(</text>
         <text class="blocklyText" y="12.5" transform="translate(120.30130004882812,10)">);</text>
         <g class="blocklyDraggable" transform="translate(75.28076934814453,6)">
           <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
           <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 34.020530700683594 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
           <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 33.520530700683594 M 33.520530700683594,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
           <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
             <rect rx="4" ry="4" x="-5" y="0" height="16" width="24.020530700683594"></rect>
             <text class="blocklyText" y="12.5">0
             <tspan>°</tspan></text>
           </g>
         </g>
       </g>
     </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">swim(<i>angle</i>){\n}
  swim(<i>angle</i>, <i>speed</i>)</pre>
  {/if}

  <p>The <code>swim()</code> function starts the duck moving.  The duck will
  continue moving in the specified direction indefinitely.</p>

  {if $ij.pond == 'js'}
    <p>
      The second (optional) parameter of <code>swim()</code> specifies the speed.
      This can be from 0 (stopped) to 100 (fast).  Direction of movement may only
      be changed if the speed is 50 or less.  If not specified, the speed is 50.
      This parameter is only available with JavaScript, not with blocks.
    </p>
  {/if}

  <p>Crashing into the edges of the pond will damage your duck.  Crashing into
  other ducks will damage both ducks.  The amount of damage is proportional to
  your speed.</p>
  {/if}


  {if $ij.level >= 9}
  <h3>Stop</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="31" width="250">
       <g class="blocklyDraggable">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 81.56034088134766 v 24 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z"></path>
         <path class="blocklyPath" fill="#995ba5" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 81.56034088134766 v 24 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z"></path>
         <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 81.06034088134766 M 81.06034088134766,0.5 M 2.6966991411008934,21.303300858899107 A 7.5,7.5 0 0,1 0.5,16 V 8"></path>
         <text class="blocklyText" y="12.5" transform="translate(10,5)">stop</text>
         <text class="blocklyText" y="12.5" transform="translate(47.718833923339844,5)">(</text>
         <text class="blocklyText" y="12.5" transform="translate(62.602386474609375,5)">);</text>
       </g>
     </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">stop()</pre>
  {/if}

  <p>The <code>stop()</code> function stops the duck from moving.  The duck will
  take a moment to slow down before stopping completely.
  {if $ij.pond == 'js'}
    This is the same as calling <code>swim()</code> with a speed of zero.
  {/if}
  </p>
  {/if}


  {if $ij.level >= 9}
  <h3>Location</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="26" width="90">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,0 H 79.93487548828125 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,0 H 79.93487548828125 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,0.5 H 79.43487548828125 M 79.43487548828125,0.5 M 0.5,23.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,5)">getX</text>
          <text class="blocklyText" y="12.5" transform="translate(50.16777038574219,5)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(65.05132293701172,5)">)</text>
        </g>
      </svg>
      {sp}&nbsp;{sp}
      <svg height="26" width="90">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,0 H 79.93487548828125 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,0 H 79.93487548828125 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,0.5 H 79.43487548828125 M 79.43487548828125,0.5 M 0.5,23.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,5)">getY</text>
          <text class="blocklyText" y="12.5" transform="translate(50.16777038574219,5)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(65.05132293701172,5)">)</text>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">getX(){\n}
  getY()</pre>
  {/if}

  <p>The <code>getX()</code> and <code>getY()</code> functions return the
  duck's horizontal and vertical positions.  Values are between 0 and 100,
  starting from the lower-left corner.</p>

  <p><img src="docs/map.png" height="190" width="244" style="padding: 0 2em;"></p>
  {/if}


  {if $ij.level >= 11}
  <h3>Speed</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="26" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,0 H 89.72347259521484 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,0 H 89.72347259521484 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,0.5 H 89.22347259521484 M 89.22347259521484,0.5 M 0.5,23.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,5)">speed</text>
          <text class="blocklyText" y="12.5" transform="translate(59.95636749267578,5)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(74.83992004394531,5)">)</text>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">speed()</pre>
  {/if}

  <p>The <code>speed()</code> function returns the duck's current speed.
  Values are between 0 (stopped) and 100 (fast).  This function may be used to
  detect collisions (which instantly stop the duck).</p>
  {/if}


  {if $ij.level >= 11}
  <h3>Health</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="26" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#7a4984" d="m 0,0 H 89.72346496582031 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#995ba5" d="m 0,0 H 89.72346496582031 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#b88cc0" d="m 0.5,0.5 H 89.22346496582031 M 89.22346496582031,0.5 M 0.5,23.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,5)">health</text>
          <text class="blocklyText" y="12.5" transform="translate(59.95635986328125,5)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(74.83991241455078,5)">)</text>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="pondSpec spec">health()</pre>
  {/if}

  <p>The <code>health()</code> function returns the duck's current health level.
  Values are between 0 (sunk) and 100 (perfect).  Advanced players may wish to
  store the health in a variable, then periodically check to see if the
  health has decreased, thus indicating that the duck is under attack.</p>

  <p>There is no way to repair health.</p>
  {/if}
</div>

{if $ij.level >= 3}
<!-- ---------------------------------------------------------------------- -->
<h2 id="logic"><img src="../common/1x1.gif">Logic</h2>

<div id="logic-content">
  {if $ij.level >= 9}
  <h3>If</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="90" width="250">
       <g class="blocklyDraggable">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 50 H 117.64627075195312 v 35 H 50 l -6,4 -3,0 -6,-4 h -7 a 8,8 0 0,0 -8,8 v 9 a 8,8 0 0,0 8,8 H 50 H 50 v 25 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 83.79044342041016,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
         <path class="blocklyPath" fill="#5b80a5" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 50 H 117.64627075195312 v 35 H 50 l -6,4 -3,0 -6,-4 h -7 a 8,8 0 0,0 -8,8 v 9 a 8,8 0 0,0 8,8 H 50 H 50 v 25 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 83.79044342041016,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
         <path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 49.5 M 49.5,0.5 H 117.14627075195312 M 49.5,35.5 M 21.989592359914347,58.01040764008565 a 8.5,8.5 0 0,0 6.0104076400856545,2.4895923599143455 H 49.5 M 49.5,60.5 H 49.5 M 2.6966991411008934,82.3033008588991 A 7.5,7.5 0 0,1 0.5,77 V 8 M 84.29044342041016,5.5 v 26 h -14.5 M 64.19044342041016,24.3 l 3.68,-2.1"></path>
         <g class="blocklyIconGroup" display="block" transform="translate(10,5)">
           <rect class="blocklyIconShape" rx="4" ry="4" height="16" width="16"></rect>
           <path class="blocklyIconSymbol" d="m4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,0.11 1.043,-0.457 1.187,0.683 0.127,1.134 0.3,0.3 1.8,0 0.3,-0.299 0.127,-1.138 1.185,-0.682 1.046,0.458 0.409,-0.11 0.9,-1.559 -0.11,-0.41 -0.92,-0.677 0,-1.366 0.92,-0.677 0.11,-0.41 -0.9,-1.559 -0.409,-0.109 -1.046,0.458 -1.185,-0.682 -0.127,-1.138 -0.3,-0.299 -1.8,0 -0.3,0.3 -0.126,1.135 -1.187,0.682 -1.043,-0.457 -0.41,0.11 -0.899,1.559 0.108,0.409z"></path>
           <circle class="blocklyIconShape" r="2.7" cx="8" cy="8"></circle>
         </g>
         <text class="blocklyText" y="12.5" transform="translate(37,10)">if&#160;(</text>
         <text class="blocklyText" y="12.5" transform="translate(93.79044342041016,10)">)&#160;{lb}</text>
         <text class="blocklyText" y="12.5" transform="translate(10,65)">{rb}</text>
       </g>
     </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="logicSpec spec">if (<i>condition</i>) {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb}{\n}
  {\n}
  {\n}
  if (<i>condition</i>) {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb} else if (<i>condition</i>) {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb}{\n}
  {\n}
  {\n}
  if (<i>condition</i>) {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb} else {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb}</pre>
  {/if}

  <p>If the condition is true, then execute the contained statements.
  The <code>if</code> may be followed by any number of
  other <code>else if</code> conditions, and at the end by
  an optional <code>else</code> condition that executes if none of the previous
  conditions were true.</p>
  {/if}


  {if $ij.level >= 9}
  <h3>Equality</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="36" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d="m 0,0 H 20 H 111.56876373291016 v 35 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 30.5,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z M 101.56876373291016,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
          <path class="blocklyPath" fill="#5b80a5" d="m 0,0 H 20 H 111.56876373291016 v 35 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 30.5,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z M 101.56876373291016,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
          <path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,0.5 H 19.5 M 19.5,0.5 H 111.06876373291016 M 0.5,34.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1 M 31,5.5 v 26 h -14.5 M 10.9,24.3 l 3.68,-2.1 M 102.06876373291016,5.5 v 26 h -14.5 M 81.96876373291016,24.3 l 3.68,-2.1"></path>
          <g class="blocklyEditableText" transform="translate(40.5,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="40.568763732910156"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">==
            <tspan style="fill: rgb(91, 128, 165);"> ▾</tspan></text>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="logicSpec spec">==    !=    &lt;    &lt;=    &gt;    &gt;=</pre>
  {/if}

  <p>These expressions compare two numbers and return <code>true</code> or <code>false</code>.
  The six available equality operators are:</p>

  <table>
    <tr>
      <th>Operator</td>
      <th>Example</td>
      <th>Returns</td>
    </tr>
    <tr>
      <td>Equals</td>
      <td><code>5 == 10</code></td>
      <td><code>false</code></td>
    </tr>
    <tr>
      <td>Not equals</td>
      <td><code>5 != 10</code></td>
      <td><code>true</code></td>
    </tr>
    <tr>
      <td>Less than</td>
      <td><code>5 &lt; 10</code></td>
      <td><code>true</code></td>
    </tr>
    <tr>
      <td>Less than or equal</td>
      <td><code>5 &lt;= 10</code></td>
      <td><code>true</code></td>
    </tr>
    <tr>
      <td>Greater than</td>
      <td><code>5 &gt; 10</code></td>
      <td><code>false</code></td>
    </tr>
    <tr>
      <td>Greater than or equal</td>
      <td><code>5 &gt;= 10</code></td>
      <td><code>false</code></td>
    </tr>
  </table>

  <p>Use of <code>!=</code> may be dangerous if the numbers being compared are
  fractions.  Consider this code that is designed to swim to 50 then stop:</p>

  <pre>while (getY() <b>!=</b> 50) {lb}{\n}
  {sp}{sp}swim(90{if $ij.pond == 'js'}, 50{/if});{\n}
  {rb}{\n}
  stop();</pre>

  <p>The above code will fail because <code>getY()</code> may be 49.4 on one
  execution, then 50.6 on the next execution.  Since the value was not seen at
  exactly 50, the loop continues forever.  Below is better code:</p>

  <pre>while (getY() <b>&lt;</b> 50) {lb}{\n}
  {sp}{sp}swim(90{if $ij.pond == 'js'}, 50{/if});{\n}
  {rb}{\n}
  stop();</pre>

  {/if}


  {if $ij.level >= 11}
  <h3>And/Or</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="36" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d="m 0,0 H 20 H 114.00337982177734 v 35 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 30.5,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z M 104.00337982177734,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
          <path class="blocklyPath" fill="#5b80a5" d="m 0,0 H 20 H 114.00337982177734 v 35 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 30.5,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z M 104.00337982177734,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
          <path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,0.5 H 19.5 M 19.5,0.5 H 113.50337982177734 M 0.5,34.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1 M 31,5.5 v 26 h -14.5 M 10.9,24.3 l 3.68,-2.1 M 104.50337982177734,5.5 v 26 h -14.5 M 84.40337982177735,24.3 l 3.68,-2.1"></path>
          <g class="blocklyEditableText" transform="translate(40.5,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="43.003379821777344"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">&amp;&amp;
            <tspan style="fill: rgb(91, 128, 165);"> ▾</tspan></text>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="logicSpec spec">&&    ||</pre>
  {/if}

  <p>'And' is represented by the <code>&&</code> operator.
  It returns <code>true</code> only if both inputs are <code>true</code>.
  For example this code will only fire the cannon if the range is both greater
  than 5 and less than 70:</p>

  <pre>if (range &gt; 5 <b>&amp;&amp;</b> range &lt; 70) {lb}{\n}
  {sp}{sp}cannon(angle, range);{\n}
  {rb}</pre>

  <p>'Or' is represented by the <code>||</code> operator.
  It returns <code>true</code> if either input is <code>true</code>.
  For example this code will stop if the duck is close to any wall:</p>

  <pre>if (getX() &lt; 10 <b>||</b> getX() &gt; 90 <b>||</b>{\n}
  {sp}{sp}{sp}{sp}getY() &lt; 10 <b>||</b> getY() &gt; 90) {lb}{\n}
  {sp}{sp}stop();{\n}
  {rb}</pre>
  {/if}


  <h3>Booleans</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="26" width="250">
       <g class="blocklyDraggable" transform="translate(8,0)">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#496684" d="m 0,0 H 58.71040344238281 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
         <path class="blocklyPath" fill="#5b80a5" d="m 0,0 H 58.71040344238281 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
         <path class="blocklyPathLight" stroke="#8ca6c0" d="m 0.5,0.5 H 58.21040344238281 M 58.21040344238281,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
         <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: default;">
           <rect rx="4" ry="4" x="-5" y="0" height="16" width="48.71040344238281"></rect>
           <text class="blocklyText" y="12.5" text-anchor="start" x="0">true
           <tspan style="fill: rgb(91, 128, 165);"> ▾</tspan></text>
         </g>
       </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="logicSpec spec">true    false</pre>
  {/if}

  <p>The value <code>true</code> is mainly used by the while loop to make a loop
  that executes forever.  The value <code>false</code> is also available.</p>
</div>
{/if}

{if $ij.level >= 3}
<!-- ---------------------------------------------------------------------- -->
<h2 id="loops"><img src="../common/1x1.gif">Loops</h2>

<div id="loops-content">
  <h3>While</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="90" width="250">
       <g class="blocklyDraggable">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#498449" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 50 H 116.73247528076172 v 35 H 50 l -6,4 -3,0 -6,-4 h -7 a 8,8 0 0,0 -8,8 v 9 a 8,8 0 0,0 8,8 H 50 H 50 v 25 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 82.87664794921875,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
         <path class="blocklyPath" fill="#5ba55b" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 50 H 116.73247528076172 v 35 H 50 l -6,4 -3,0 -6,-4 h -7 a 8,8 0 0,0 -8,8 v 9 a 8,8 0 0,0 8,8 H 50 H 50 v 25 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 82.87664794921875,5 h -14.5 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 6 h 14.5 z"></path>
         <path class="blocklyPathLight" stroke="#8cc08c" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 49.5 M 49.5,0.5 H 116.23247528076172 M 49.5,35.5 M 21.989592359914347,58.01040764008565 a 8.5,8.5 0 0,0 6.0104076400856545,2.4895923599143455 H 49.5 M 49.5,60.5 H 49.5 M 2.6966991411008934,82.3033008588991 A 7.5,7.5 0 0,1 0.5,77 V 8 M 83.37664794921875,5.5 v 26 h -14.5 M 63.27664794921875,24.3 l 3.68,-2.1"></path>
         <text class="blocklyText" y="12.5" transform="translate(10,10)">while&#160;(</text>
         <text class="blocklyText" y="12.5" transform="translate(92.87664794921875,10)">)&#160;{lb}</text>
         <text class="blocklyText" y="12.5" transform="translate(10,65)">{rb}</text>
       </g>
     </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="loopsSpec spec">while (<i>condition</i>) {lb}{\n}
  {sp}{sp}<i>statements</i>{\n}
  {rb}</pre>
  {/if}

  <p>Loops will repeat executing the enclosed statements as long as the
  condition is true.  Thus, the following will fire the cannon west forever:</p>

  <pre>while (true) {lb}{\n}
  {sp}{sp}cannon(180, 50);{\n}
  {rb}</pre>

  <p>Whereas the following will fire the canon west as long as an opponent is in
  range:</p>

  <pre>while (scan(180{if $ij.pond == 'js'}, 5{/if}) &lt;= 70) {lb}{\n}
  {sp}{sp}cannon(180, scan(180{if $ij.pond == 'js'}, 5{/if}));{\n}
  {rb}</pre>
</div>
{/if}

<!-- ---------------------------------------------------------------------- -->
<h2 id="math"><img src="../common/1x1.gif">Math</h2>

<div id="math-content">
  <h3>Number</h3>

  {if $ij.pond == 'blocks'}
    <p>
     <svg height="26" width="250">
       <g class="blocklyDraggable" transform="translate(8,0)">
         <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
         <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
         <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
         <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
           <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
           <text class="blocklyText" y="12.5">0</text>
         </g>
       </g>
     </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="mathSpec spec">123</pre>
  {/if}

  <p>Numbers are used for many things, including ranges, angles, and counters.
  Numbers may be negative (e.g. -360), or fractional (e.g. 3.14159),
  or very large (e.g. 9007199254740992).
  There is even a special number called <code>Infinity</code>.</p>

  <p>Do not use thousands separators (e.g. 9,000).</p>


  {if $ij.level >= 11}
  <h3>Arithmetic</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="36" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 20 H 134.3165740966797 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 46.155967712402344,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z M 124.31657409667969,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 20 H 134.3165740966797 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 46.155967712402344,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z M 124.31657409667969,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 19.5 M 19.5,0.5 H 133.8165740966797 M 0.5,35.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1 M 46.655967712402344,5.5 v 27 h -30.155967712402344 M 10.9,24.3 l 3.68,-2.1 M 124.81657409667969,5.5 v 27 h -30.155967712402344 M 89.06060638427735,24.3 l 3.68,-2.1"></path>
          <g class="blocklyEditableText" transform="translate(56.155967712402344,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="32.004638671875"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">+
            <tspan style="fill: rgb(91, 103, 165);"> ▾</tspan></text>
          </g>
          <g class="blocklyDraggable" transform="translate(95.16060638427734,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
              <text class="blocklyText" y="12.5">2</text>
            </g>
          </g>
          <g class="blocklyDraggable" transform="translate(16.999999999999943,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
              <text class="blocklyText" y="12.5">1</text>
            </g>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="mathSpec spec">+    -    *    /</pre>
  {/if}

  <p>These operators take two numbers and return a single number.
  The four available arithmetic operators are:</p>

  <table>
    <tr>
      <th>Operator</td>
      <th>Example</td>
      <th>Returns</td>
    </tr>
    <tr>
      <td>Plus</td>
      <td><code>3 + 4</code></td>
      <td><code>7</code></td>
    </tr>
    <tr>
      <td>Minus</td>
      <td><code>3 - 4</code></td>
      <td><code>-1</code></td>
    </tr>
    <tr>
      <td>Multiply</td>
      <td><code>3 * 4</code></td>
      <td><code>12</code></td>
    </tr>
    <tr>
      <td>Divide</td>
      <td><code>3 / 4</code></td>
      <td><code>0.75</code></td>
    </tr>
  </table>
  {/if}


  {if $ij.level >= 11}
  <h3>Trigonometry</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="36" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 20 H 170.4867935180664 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 145.60324096679688,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 20 H 170.4867935180664 v 36 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z M 145.60324096679688,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 19.5 M 19.5,0.5 H 169.9867935180664 M 0.5,35.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1 M 146.10324096679688,5.5 v 27 h -30.155967712402344 M 110.34727325439454,24.3 l 3.68,-2.1"></path>
          <g class="blocklyEditableText" transform="translate(10,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="84.563720703125"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">Math.sqrt
            <tspan style="fill: rgb(91, 103, 165);"> ▾</tspan></text>
          </g>
          <text class="blocklyText" y="12.5" transform="translate(94.563720703125,10)">(</text>
          <text class="blocklyText" y="12.5" transform="translate(155.60324096679688,10)">)</text>
          <g class="blocklyDraggable" transform="translate(116.44727325439453,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
              <text class="blocklyText" y="12.5">9</text>
            </g>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="mathSpec spec">Math.<i>operation</i>(<i>number</i>)</pre>
  {/if}

  <p>These functions take a number and return a number.
  The eight available functions are:</p>

  <table>
    <tr>
      <th>Function</td>
      <th>Example</td>
      <th>Returns</td>
    </tr>
    <tr>
      <td>Square root</td>
      <td><code>Math.sqrt(25)</code></td>
      <td><code>5</code></td>
    </tr>
    <tr>
      <td>Absolute</td>
      <td><code>Math.abs(-25)</code></td>
      <td><code>25</code></td>
    </tr>
    <tr>
      <td>Sine</td>
      <td><code>Math.sin_deg(30)</code></td>
      <td><code>0.5</code></td>
    </tr>
    <tr>
      <td>Cosine</td>
      <td><code>Math.cos_deg(30)</code></td>
      <td><code>0.866</code></td>
    </tr>
    <tr>
      <td>Tangent</td>
      <td><code>Math.tan_deg(30)</code></td>
      <td><code>0.577</code></td>
    </tr>
    <tr>
      <td>Arcsine</td>
      <td><code>Math.asin_deg(0.5)</code></td>
      <td><code>30</code></td>
    </tr>
    <tr>
      <td>Arccosine</td>
      <td><code>Math.acos_deg(0.866)</code></td>
      <td><code>30.003</code></td>
    </tr>
    <tr>
      <td>Arctangent</td>
      <td><code>Math.atan_deg(0.577)</code></td>
      <td><code>29.985</code></td>
    </tr>
  </table>

  <p>Note that these trigonmetric functions are custom to the Pond game and
  all use degrees.  The standard JavaScript functions use radians.</p>
  {/if}


  {if $ij.level >= 11}
  <h3>Random</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="26" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 132.46497344970703 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 132.46497344970703 v 24 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 131.96497344970703 M 131.96497344970703,0.5 M 0.5,23.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,5)">Math.random&#160;&#160;(&#160;&#160;)</text>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="mathSpec spec">Math.random()</pre>
  {/if}

  <p>This function returns a random fraction from 0.0 to 1.0.  To get a random
  number in a larger range, just multiply it by the maximum value.
  Here's an example of getting a random angle:</p>

  <pre>var angle = Math.random() * 360;</pre>
  {/if}
</div>

{if $ij.level >= 11}
<!-- ---------------------------------------------------------------------- -->
<h2 id="variables"><img src="../common/1x1.gif">Variables</h2>

<div id="variables-content">
  <h3>Assigning</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="40" width="250">
        <g class="blocklyDraggable">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 179.29097747802734 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 155.2165756225586,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPath" fill="#a55b80" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 179.29097747802734 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 155.2165756225586,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPathLight" stroke="#c08ca6" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 39.5 M 39.5,0.5 H 178.79097747802734 M 2.6966991411008934,33.30330085889911 A 7.5,7.5 0 0,1 0.5,28 V 8 M 155.7165756225586,5.5 v 27 h -30.155967712402344 M 119.96060791015626,24.3 l 3.68,-2.1"></path>
          <text class="blocklyText" y="12.5" transform="translate(10,10)">var</text>
          <g class="blocklyEditableText" transform="translate(40.37201690673828,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="60.12446594238281"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">name
            <tspan style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
          </g>
          <text class="blocklyText" y="12.5" transform="translate(100.4964828491211,10)">=</text>
          <text class="blocklyText" y="12.5" transform="translate(165.2165756225586,10)">;</text>
          <g class="blocklyDraggable" transform="translate(126.06060791015625,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
              <text class="blocklyText" y="12.5">0</text>
            </g>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="variablesSpec spec">var <i>name</i> = <i>value</i>;</pre>
  {/if}

  <p>Assigns a value (usually a number) to the named variable.
  The name of the variable should be something that makes sense,
  such as <code>range</code> or <code>angle</code>.</p>

  {if $ij.pond == 'js'}
  <p>Note that variable names are case-sensitive,
  thus <code>angle</code> and <code>Angle</code> are two completely different
  variables.  Variable names must only use the English letters a-z, and numbers.
  Variable names may not start with a number.</p>

  <p>The <code>var</code> keyword may be omitted on all but the first assignment,
  but there is no harm in using it.</p>
  {/if}


  <h3>Incrementing</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="41" width="250">
        <g class="blocklyDraggable">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 157.48308563232422 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 133.40868377685547,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPath" fill="#a55b80" d="m 0,8 A 8,8 0 0,1 8,0 H 15 l 6,4 3,0 6,-4 H 40 H 157.48308563232422 v 36 H 29.5 l -6,4 -3,0 -6,-4 H 8 a 8,8 0 0,1 -8,-8 z M 133.40868377685547,5 h -30.155967712402344 v 5 c 0,10 -8,-8 -8,7.5 s 8,-2.5 8,7.5 v 7 h 30.155967712402344 z"></path>
          <path class="blocklyPathLight" stroke="#c08ca6" d="m 0.5,7.5 A 7.5,7.5 0 0,1 8,0.5 H 15 l 6,4 3,0 6,-4 H 39.5 M 39.5,0.5 H 156.98308563232422 M 2.6966991411008934,33.30330085889911 A 7.5,7.5 0 0,1 0.5,28 V 8 M 133.90868377685547,5.5 v 27 h -30.155967712402344 M 98.15271606445313,24.3 l 3.68,-2.1"></path>
          <g class="blocklyEditableText" transform="translate(10,10)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="60.12446594238281"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">name
            <tspan style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
          </g>
          <text class="blocklyText" y="12.5" transform="translate(70.12446594238281,10)">+=</text>
          <text class="blocklyText" y="12.5" transform="translate(143.40868377685547,10)">;</text>
          <g class="blocklyDraggable" transform="translate(104.25271606445312,6)">
            <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPath" fill="#5b67a5" d="m 0,0 H 28.155967712402344 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
            <path class="blocklyPathLight" stroke="#8c95c0" d="m 0.5,0.5 H 27.655967712402344 M 27.655967712402344,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
            <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: text;">
              <rect rx="4" ry="4" x="-5" y="0" height="16" width="18.155967712402344"></rect>
              <text class="blocklyText" y="12.5">1</text>
            </g>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="variablesSpec spec"><i>name</i> += <i>number</i>;</pre>
  {/if}

  <p>This is a shortcut for adding a number to an existing variable.
  There is no difference between the following two lines:</p>

  <pre>angle += 10;{\n}
  var angle = angle + 10;</pre>

  <p>Do not use <code>+=</code> on a variable that has not already been defined.
  If in doubt, assign the variable to 0 at the beginning of the program.</p>


  <h3>Retrieving</h3>

  {if $ij.pond == 'blocks'}
    <p>
      <svg height="26" width="250">
        <g class="blocklyDraggable" transform="translate(8,0)">
          <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d="m 0,0 H 70.12446594238281 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPath" fill="#a55b80" d="m 0,0 H 70.12446594238281 v 25 H 0 V 20 c 0,-10 -8,8 -8,-7.5 s 8,2.5 8,-7.5 z"></path>
          <path class="blocklyPathLight" stroke="#c08ca6" d="m 0.5,0.5 H 69.62446594238281 M 69.62446594238281,0.5 M 0.5,24.5 V 18.5 m -7.36,-0.5 q -1.52,-5.5 0,-11 m 7.36,1 V 0.5 H 1"></path>
          <g class="blocklyEditableText" transform="translate(10,5)" style="cursor: default;">
            <rect rx="4" ry="4" x="-5" y="0" height="16" width="60.12446594238281"></rect>
            <text class="blocklyText" y="12.5" text-anchor="start" x="0">name
            <tspan style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
          </g>
        </g>
      </svg>
    </p>
  {elseif $ij.pond == 'js'}
    <pre class="variablesSpec spec"><i>name</i></pre>
  {/if}

  <p>Retrieves the value (usually a number) that had previously been assigned
  to the named variable.</p>
</div>
{/if}

{if $ij.level >= 11}
<!-- ---------------------------------------------------------------------- -->
<h2 id="functions"><img src="../common/1x1.gif">Functions</h2>

<div id="functions-content">
  <p>TODO</p>
</div>
{/if}

{/template}
